<script setup>
import SubAppHelper from '@main/utils/SubAppHelper';
import HistoryHelper from '@/src/utils/HistoryHelper';

const $router = useRouter();
const { t } = useI18n({ useScope: 'global' });

const appGroups = SubAppHelper.getListForHomePage();
const onClickApp = (app) => {
  $router.push({ path: HistoryHelper.getSubAppPath(app.name) });
};
</script>

<template>
  <MainViewContainer>
    <ElRow :gutter="24" class="row">
      <ElCol v-for="(appGroup, groupName) in appGroups" :key="groupName" :span="8">
        <!-- 目前每一个 Collapse 中只有一个 CollapseItem，且需要将所有的 CollapseItem 默认展开 -->
        <ElCollapse class="collapse-container" :modelValue="[groupName]">
          <ElCollapseItem class="collapse-item" :name="groupName">
            <template #title>
              <span class="title">{{t(`appGroup.${groupName}`)}}</span>
            </template>
            <div class="apps">
              <div v-for="app in appGroup" :key="app.name" class="app-container" @click="onClickApp(app)">
                <component
                  :is="app.icon"
                  width="32"
                  height="35"
                  viewBox="0 0 42 46"
                  class="app-icon"
                />
                <div class="content">
                  <div class="name">{{t(`subApp.${app.name}`)}}</div>
                  <div class="abbr">{{app.abbr || '-'}}</div>
                </div>
              </div>
            </div>
          </ElCollapseItem>
        </ElCollapse>
      </ElCol>
    </ElRow>
  </MainViewContainer>
</template>

<style lang="scss" scoped>
.row {
  width: 100%;
}

.collapse-container {
  background-color: #fafafa;
}

.collapse-item {
  .title {
    margin: 0.25em 0 0.25em 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(0 0 0 / 85%);
  }

  .apps {
    padding: 0 16px;
  }

  .app-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;

    &:hover {
      background-color: #f2f2f2;
    }

    .app-icon {
      margin-right: 16px;
    }

    .abbr {
      color: rgb(102 102 102);
    }
  }
}
</style>
